<template>
  <ClientOnly >
    <div class="relative flex w-full flex-col overflow-hidden p-6">
      <AnimatedList  :delay="100" class="dark" ref="animatedList">
        <template #default>
          <Notification
              v-for="(item, idx) in notifications"
              :key="idx"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
              :color="item.color"
              :time="item.time"
          />
        </template>
      </AnimatedList>
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import Notification from "@/components/inspia/Notification/index.vue";
import AnimatedList from "@/components/inspia/AnimatedList/index.vue";
import {onMounted, ref} from "vue";
const animatedList = ref(null)


const notifications = [];

const addNotice = (obj) => {
  notifications.push(obj)
  animatedList.value.startLoop()
  setTimeout(() => {
    notifications.shift()
  } , 5000)
}

defineExpose({
  addNotice
})
</script>
